<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <css file="__DATA__/css/base.css"/>
    <link type="text/css" href="__ROOT__/data/ui/css/flick/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="__ROOT__/data/ui/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="__ROOT__/data/ui/js/jquery-ui-1.8.23.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#tabs").tabs();
        })
    </script>
 
</head>
    <body style="padding:10px;">
    <div class="path">
        <strong>您现在的位置：</strong>
        会员管理 > 添加用户</empty>
    </div>
    <form action="__CONTROL__/user_add" method="post"  onsubmit="return regs('click')">
    
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">用户信息填写</a></li>
               
            </ul>
            <div id="tabs-1">   
                <table class="table2">
                    <tr>
                        <th>用户名：</th>
                        <td><input type="text" name="username" style="width:360px;"/> <span class="stats1">请输入用户名</span></td>
                    </tr>
                     <tr>
                        <th>密  码：</th>
                        <td><input type="password" name="password" style="width:360px;"/> <span class="stats1">输入用户密码</span></td>
                    </tr>
                      <tr>
                        <th>重复密码：</th>
                        <td><input type="password" name="repass" style="width:360px;"/> <span class="stats1">再次输入密码</span></td>
                    </tr>
                   <!-- <tr>
                        <th>性  别：</th>
                        <td>男：<input type="radio" name="sex" value="male" />&nbsp;&nbsp;女：<input type="radio" name="sex" value="female" /></td>
                    </tr>
                    <tr>-->
                        <th>邮  箱：</th>
                        <td><input type="text" name="email" style="width:360px;"/> <span class="stats1">请输入你的邮箱</span></td>
                    </tr>
					<tr>
                        <th>用户组：</th>
                        <td>
							<select name="user_role[rid]">
							<list from="$role" name="$v">
								<option value="{$v.rid}">{$v.title}</option>
							</list>
							</select>
						</td>
                    </tr>
                </table>
            </div>
            <div style="padding-left:100px;">
                <input type="submit" value="确认提交" class="submit"/>
            </div>
        </div>
    </form>
         <style>

   .stats1{
     color:#aaa;
   }
   .stats2{
     color:#000;
   }   
   .stats3{
     color:red;
   }   
   .stats4{
     color:green;
   }
 </style>
        
        
         <script>
//获取下一个span,可以通过这个对象给状态
function gspan (cobj) {
    while (true) {
	    if (cobj.nextSibling.nodeName!="SPAN") 
	       cobj=cobj.nextSibling;
		else 
		   return cobj.nextSibling;
		}
}
/*
通用检查方法
第一个参数：obj,是用来检查的对象
第二个参数：info，是用来检查的提示信息
第三个参数：fun,是一个回调函数，用来检查值是否按条件输入
第四个参数：click只是一个状态，分清楚是单击提交，还是失去焦点
*/

function check (obj,info,fun,click) {
        var sp=gspan(obj);
        obj.onfocus=function  () {
               sp.innerHTML=info;
			   sp.className="stats2";
			   }

        obj.onblur=function  () {
            if (fun(this.value)) {
               sp.innerHTML="输入正确";
			   sp.className="stats4";
			   }else{
			   sp.innerHTML=info;
			   sp.className="stats3";
			   }
           }
		   if (click=="click")
		       obj.onblur();
}

//页面加载完自动调用
onload=regs

function regs (click) {

var stat=true;
    var username=document.getElementsByName("username")[0];
    var password=document.getElementsByName("password")[0];
    var repass=document.getElementsByName("repass")[0];
    var email=document.getElementsByName("email")[0];

    check(username,"用户名长度5-20之间",function(val){
     if(val.match(/^\S+$/) && val.length >=5 && val.length <=20){
	     return true;
     }else{
         stat=false;
		 return false;
	 }
   },click);
   
   check(password,"密码须在6-20位之间",function(val){
      if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){
	     return true;
    }else{
	     stat=false;
		 return false;
     }
   },click);

   check(repass,"两次密码填写须一致",function(val){
       if(val.match(/^\S+$/) && val.length >=6 && val.length<=20 && val==password.value){
          return true;
    }else{
	     stat=false;
		 return false;
     }
   },click);

   check(email,"请输入正确的邮箱", function(val){
        if (val.match(/\w+@\w+\.\w/)) {
           return true;
    }else{
	     stat=false;
		 return false;
     }
   },click);
      
   return stat;
}
  </script>
	
</body>
</html>
